<template>
  <div class="table-container no-scrollbar scroll-x">
    <table :class="[size]">
      <thead>
        <tr>
          <td
            :style="bindColumnsStyle(column)"
            v-for="column in columns"
            :key="column.key"
          >
            {{ $t(column.title) }}
          </td>
          <td
            v-if="operate != 'none'"
            :style="bindColumnsStyle({ width: operate.width })"
          >
            {{ $t("tag.operate") }}
          </td>
        </tr>
      </thead>
      <tbody
        v-if="data && data.length > 0"
        :class="[hover ? 'hover' : '', striped ? 'striped' : '']"
      >
        <tr v-for="(row, rowIndex) in data" :key="rowIndex">
          <td
            :style="bindColumnsStyle(column)"
            v-for="(column, columnIndex) in columns"
            :key="column.key"
          >
            <slot
              :name="column.key"
              :row="row"
              :rowIndex="rowIndex"
              :columnIndex="columnIndex"
            >
              {{
                column.none
                  ? row[column.key] || $t("tag.none")
                  : row[column.key]
              }}
            </slot>
          </td>
          <td
            v-if="operate != 'none'"
            :style="bindColumnsStyle({ width: operate.width })"
          >
            <slot name="operate" :row="row" :index="rowIndex">
              <div class="operate">
                <span
                  v-if="operate.detail"
                  @click="onClickOperate(row, rowIndex, 'detail')"
                  >{{ $t("btnText.detail") }}</span
                >
                <span
                  v-if="operate.pay"
                  @click="onClickOperate(row, rowIndex, 'pay')"
                  >{{ $t("btnText.pay") }}</span
                >
              </div>
            </slot>
          </td>
        </tr>
      </tbody>
      <NoData v-if="data && data.length == 0" />
    </table>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

type Operate =
  | {
      detail?: string | boolean;
      pay?: string | boolean;
      width?: string;
    }
  | "none";

type ColumnItem = {
  title: string;
  key: string;
  width?: string;
  none?: boolean;
  min?: boolean; // 最小宽度
};

type Props = {
  data: any[];
  columns: ColumnItem[];
  hover?: boolean;
  operate?: Operate;
  theadBgColor?: string;
  size: "small" | "default";
  striped?: boolean;
  fontFamily?: string;
  // 开启表格第一行的索引
  index?: boolean;
  // 表格每一行的索引的长度
  indexLength?: number;
};

const props = withDefaults(defineProps<Props>(), {
  hover: false,
  size: "default",
  indexLength: 2,
  data: () => [],
  columns: () => [],
  operate: () => {
    return {
      detail: true,
      pay: true,
    };
  },
});

const bindColumnsStyle = computed(() => {
  return (column: ColumnItem) => {
    let style = "";
    if (column.min) {
      style += `min-width:${column.width};flex: 0 1 auto;`;
    } else {
      if (column.width) {
        style += `width:${column.width};flex: 0 1 auto;`;
      }
    }
    return style;
  };
});

// 表格索引
const tableIndex = computed(() => {
  return (rowIndex: number): string => {
    return rowIndex.toString().padStart(props.indexLength, "0");
  };
});

const emits = defineEmits(["click-operate"]);
const onClickOperate = (row: any, index: number, type: string) => {
  emits("click-operate", { row, index, type });
};

const theadBgColor = computed(() => props.theadBgColor || "#ebeff2");
const fontFamily = computed(() => props.fontFamily || "");
</script>
<style scoped lang="less">
table {
  font-size: 16px;
  width: 100%;
  white-space: normal;
  word-break: break-all;
  font-family: v-bind(fontFamily);
  &.small {
    thead tr td {
      padding: 13px 12px !important;
    }
    tbody tr td {
      padding: 11px 12px !important;
    }
  }
  thead {
    background-color: v-bind(theadBgColor);
    color: #969696;
    tr {
      display: flex;
      td {
        padding: 13px 24px;
        flex: 1;
      }
    }
  }
  tbody {
    &.striped {
      tr:nth-child(even) {
        background-color: #fcfdfd;
      }
    }
    // 表格悬浮变色
    &.hover {
      tr:hover {
        background-color: #ebeff2;
      }
    }
    color: #323232;
    tr {
      display: flex;
      border-bottom: 1px solid #ebeff2;
      align-items: center;
      transition: all 0.15s ease-inout;

      td {
        flex: 1;
        padding: 21px 24px;
        .operate {
          display: flex;
          gap: 40px;
          span {
            cursor: pointer;
            &:hover {
              color: #4168ff;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  table {
    width: 300%;
    font-size: 72px;
    td {
      padding: 64px !important;
      flex: 1 !important;
    }
  }
}
</style>
